<template>
    <div id="index_page">
        <div class="index-banner" @mouseenter="clearTimer" @mouseleave="startTimer">
            <i class="index-banner-bg"></i>
            <!-- 头部 -->
            <div class="index-header">
                <div class="index-container clearfix">
                    <div class="f-fl">
                        <a class="index-login-icon" href="#"></a>
                    </div>
                    <div class="f-fr">
                        <router-link to="/login" class="index-login-btn">登录</router-link>
                    </div>
                </div>
            </div>
            <!-- banner -->
            <div class="index-banner-container index-container">
                <div class="index-banner-slider">
                    <transition name="fade-banner" v-for="(item, index) in bannerList" :key="index">
                        <div
                            class="index-banner-item"
                            :style="{'background-image': `url(${item.bgUrl})`}"
                            v-show="bannerIndex === index"
                        >
                            <h3 class="index-banner-title">{{item.title}}</h3>
                            <p class="index-banner-text">{{item.content}}</p>
                        </div>
                    </transition>
                    <ul class="index-banner-indicators">
                        <li
                            class="index-banner-indicator"
                            v-for="(item, index) in bannerList"
                            :key="index"
                            @click="setBannerIndex(index)"
                        >
                            <span :class="{'index-indicator-btn': true, 'active': index === bannerIndex}"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 产品介绍 -->
        <div class="index-product">
            <div class="index-title">了解我们的产品</div>
            <div class="index-product-tabs">
                <div
                    v-for="(item, index) in productList"
                    :key="index"
                    :class="[item.tabClass, productIndex === index ? 'active index-product-tabs-item': 'index-product-tabs-item']"
                    @click="handleClickProduct(index)"
                >
                    <i :class="['index-product-icon', item.tabIconClass]"></i>
                    <div>{{item.tabTitle}}</div>
                </div>
            </div>
            <div class="product-content">
                <transition name="el-fade-in" v-for="(item, index) in productList" :key="index">
                    <div
                        :class="['index-container', item.contentClass]"
                        v-show="productIndex === index"
                    >
                        <div class="product-content-item">
                            <div class="product-title">{{item.contentTitle}}</div>
                            <p v-for="(text, j) in item.contentTexts" :key="j">{{text}}</p>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
        <!-- 服务方案 -->
        <div class="index-service-plan">
            <div class="index-container">
                <div class="index-title">产品服务方案</div>
                <div class="index-plant-content">
                    <div class="index-plant-content-item" v-for="(item, index) in plantList" :key="index">
                        <div class="index-plant">
                            <div :class="['index-plant-header', item.iconClass]">{{item.title}}</div>
                            <ul class="index-plant-body">
                                <li v-for="(text, j) in item.contentTexts" :key="j">{{text}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 试用产品 -->
        <div class="produc-try-out">
            <div class="index-container">
                <div class="index-title">试用产品</div>
                <div class="produc-try-out-content">请留下您的联系方式,我们将会第一时间与您联系</div>
                <router-link to="/register" class="try-out-btn">我要试用</router-link>
            </div>
        </div>
        <!-- 底部 -->
        <div class="index-footer">
            <div class="index-footer-info">
                <div class="index-container">
                    <div class="index-company-info">
                        <p>公司名称：深圳航天信息有限公司</p>
                        <p>地 址：深圳市福田区梅林街道下梅林北环大道7018号701航天信息</p>
                        <p>服务热线：0755-95113</p>
                        <p>联系邮箱：emt_service@szhtxx.com</p>
                        <p>
                            咨询QQ：
                            <a
                                href="https://wpa.qq.com/msgrd?v=3&uin=1009438083&site=qq&menu=yes"
                                target="_blank"
                            >1009438083</a>
                        </p>
                    </div>
                    <div class="index-qr-code">
                        <img src="~@/assets/images/index/qr.png">
                        <div class="index-qr-text">扫描二维码 关注微服务</div>
                    </div>
                </div>
            </div>
            <div class="index-container">
                <div class="index-footer-about">
                    版权所有©2018 深圳航天信息有限公司
                    <a href="http://www.beian.miit.gov.cn/" target="_blank">粤ICP备14036066号</a>
                </div>
            </div>
        </div>

        <!-- 咨询 -->
        <div class="index-advisory">
            <i class="index-advisory-icon"></i>
            <div class="index-advisory-content">咨询<i></i>反馈</div>
            <div class="index-advisory-poptip">
                <div class="index-poptip-content">
                    <div>
                        <div class="index-poptip-title">
                            <i class="index-icon index-icon-attention"></i>
                            关注微服务
                        </div>
                        <div class="index-poptip-qr">
                            <img src="~@/assets/images/index/qr.png">
                        </div>
                    </div>
                    <div>
                        <div class="index-poptip-title">
                            <i class="index-icon index-icon-tel"></i>
                            服务热线
                        </div>
                        <div class="index-poptip-tel">0755-95113</div>
                    </div>
                    <div>
                        <div class="index-poptip-title">
                            <i class="index-icon index-icon-qq"></i>
                            咨询QQ
                        </div>
                        <div class="index-poptip-tel">
                            <a
                                href="https://wpa.qq.com/msgrd?v=3&uin=1009438083&site=qq&menu=yes"
                                target="_blank"
                            >1009438083</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="index-backtop" v-show="backTop" @click="back"></div>
    </div>
</template>

<script>
import { scrollTop } from '@/libs/animate'
const b_1 = require('@/assets/images/index/b_1.png')
const b_2 = require('@/assets/images/index/b_2.png')
const b_3 = require('@/assets/images/index/b_3.png')

export default {
    data () {
        return {
            bannerIndex: 0,
            interval: 3000,
            bannerList: [
                {
                    title: '深航信eMTouch',
                    content: '提速、提质、减负助推企业成功每一步！',
                    bgUrl: b_1
                },
                {
                    title: '云享e通关',
                    content: '打造共享共生共赢的线上关务新生态！',
                    bgUrl: b_2
                },
                {
                    title: '未来可期',
                    content:
                        '区块链+海关、大数据+人工智能、深航信eMTouch国际版、跨境贸易新生态 ',
                    bgUrl: b_3
                }
            ],
            productIndex: 0,
            productList: [
                {
                    tabTitle: '聚焦通关业务',
                    tabClass: 'product-customs-business',
                    tabIconClass: 'customs-business-icon',
                    contentClass: 'customs-business-bg',
                    contentTitle: '聚焦通关业务',
                    contentTexts: [
                        '对接“单一窗口”货物申报、核注清单导入与申报、智能制单等基础快捷功能。',
                        '系统多源关务数据的集约化导入管理、业务数据自动关联、基础数据调用，订单信息转为报关单数据、联动智能校验和逻辑纠错'
                    ]
                },
                {
                    tabTitle: '企业关务管理',
                    tabClass: 'product-customs-manage',
                    tabIconClass: 'customs-manage-icon',
                    contentClass: 'customs-manage-bg',
                    contentTitle: '企业关务管理',
                    contentTexts: [
                        '系统化流程化功能模块，以进出口报关申报为核心，涵盖通关操作相关部门的业务操作和管理控制。',
                        '复杂的业务模块化，功能模块标准化，灵活配置，更贴切客户差异化业务实际需求。'
                    ]
                },
                {
                    tabTitle: '作业链协同',
                    tabClass: 'product-customs-joint',
                    tabIconClass: 'customs-joint-icon',
                    contentClass: 'customs-joint-bg',
                    contentTitle: '作业链协同',
                    contentTexts: [
                        '对接通关产业链上下游服务需求，数据一次导入共享，委托派单，线上作业流反馈通知。',
                        '借助平台将通关产业链上下游服务资源整合，撮合交易，打造围绕通关物流圈线上关务新生态。'
                    ]
                }
            ],
            plantList: [
                {
                    title: '智能通关申报(基础版)',
                    iconClass: 'plant1_bg',
                    contentTexts: [
                        '多源数据集约化导入',
                        '智能制单',
                        '联动校验和逻辑纠错',
                        '舱单管理',
                        '财务管理',
                        '高效关务应用工具'
                    ]
                },
                {
                    title: 'AEO认证标准版',
                    iconClass: 'plant2_bg',
                    contentTexts: [
                        '完整数据链管理',
                        '符合规范申报要求',
                        '贸易伙伴安全管理'
                    ]
                },
                {
                    title: '线下辅助通关服务',
                    iconClass: 'plant3_bg',
                    contentTexts: [
                        '日常关务事项咨询',
                        '通关口岸现场协助',
                        '异常关务事件处理'
                    ]
                },
                {
                    title: '项目定制化开发',
                    iconClass: 'plant4_bg',
                    contentTexts: [
                        '专业级关务内控系统',
                        '关务衍生类：物流、仓储',
                        '特殊监管区域版'
                    ]
                }
            ],
            backTop: false
        }
    },
    mounted () {
        this.bindEvent()
        this.startTimer()
    },
    methods: {
        handleClickProduct (index) {
            this.productIndex = index
        },
        wScroll (event) {
            this.backTop = event.target.scrollTop >= 400
        },
        bindEvent () {
            document
                .getElementById('index_page')
                .addEventListener('scroll', this.wScroll)
        },
        back () {
            const sTop = document.getElementById('index_page').scrollTop
            scrollTop(
                document.getElementById('index_page'),
                sTop,
                0,
                0
            )
        },
        startTimer () {
            this.clearTimer()
            this.timer = setInterval(() => {
                this.setBannerIndex(this.bannerIndex + 1)
            }, this.interval)
        },
        setBannerIndex (index) {
            if (index < this.bannerList.length && index >= 0) {
                this.bannerIndex = index
            } else {
                this.bannerIndex = 0
            }
        },
        clearTimer () {
            this.timer && clearInterval(this.timer)
        }
    },
    beforeDestroy () {
        this.clearTimer()
    }
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
